<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<title>Document</title>
	<style>
		.video {
			width: 50%;
			margin: 20px auto;
			position: relative;
		}
		.video video {
			display: block;
			width: 100%;
		}
		.video .video-masker {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 9999999999;
		}
		.video .play-btn {
			width: 50px;
			height: 50px;
			background-color: red;
			position: absolute;
			top: 50%;
			left: 50%;
			margin: -25px 0 0 -25px;
			display: none;
			z-index: 9999999999;
		}
		.video:hover .play-btn {
			display: block;
		}
		.video .progress-bar {
			height: 10px;
			background-color: red;
			position: absolute;
			bottom: 5px;
			left: 5px;
			right: 5px;
			border: 1px solid #fff;
			z-index: 9999999999;
		}
		.video .progress-bar #progress {
			content: '';
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			height: 10px;
			width: 0px;
			background-color: green;
			z-index: 9999999999;
		}
		.video .full-screen {
			width: 50px;
			height: 30px;
			line-height: 30px;
			text-align: center;
			position: absolute;
			top: 10px;
			right: 10px;
			background-color: #000;
			color: #fff;
			z-index: 9999999999;
		}
		video::-webkit-media-controls-enclosure {
            display: none!important;
        }
	</style>
</head>
<body>

	<div class="video">
		<video controls id="video" src="res/test.mp4" webkit-playsinline></video>
		<div class="video-masker"></div>
		<div id="playBtn" class="play-btn"></div>
		<div id="progressBar" class="progress-bar"><div id="progress"></div></div>
		<div id="fullScreenBtn" class="full-screen">全屏</div>
	</div>

	<script>
	
	var video = document.getElementById('video');
	var playBtn = document.getElementById('playBtn');
	var fullScreenBtn = document.getElementById('fullScreenBtn');
	var progressBar = document.getElementById('progressBar');
	var progress = document.getElementById('progress');
	var timer;
	var isFullScreen = false;
	playBtn.onclick = function() {
		if (video.paused) {
			video.play();
			this.style.backgroundColor = 'blue';
			timer = setInterval(getProgress, 60);
		} else {
			video.pause();
			this.style.backgroundColor = 'red';
			clearInterval(timer);
		}
		
	};
	function getProgress(){
        var percent = video.currentTime / video.duration;
        var width = progressBar.offsetWidth;
        progress.style.width = percent * progressBar.offsetWidth + "px";
        if (percent * progressBar.offsetWidth + 2 > width) {
        	progress.style.width = '100%';
        }
    }
	video.addEventListener('ended', function() {
		playBtn.style.backgroundColor = 'red';
		clearInterval(timer);
	}, false);
	fullScreenBtn.addEventListener('click', function() {
		if (isFullScreen) {
			video.webkitExitFullscreen();
			isFullScreen = false;
			this.innerHTML = '全屏';
		} else {
			video.webkitRequestFullScreen(); // 其他浏览器有兼容方法
			isFullScreen = true;
			this.innerHTML = '退出';
		}
	}, false);
	video.addEventListener('loadedmetadata', function() {
		console.log(video.duration); // 此时可以显示视频总时间，可以转化成想要的格式
	}, false);
	</script>
	
</body>
</html>